<template>
  <div class="fileProcess">
      <a-spin :spinning="spinning">
        <div class="topBox">
          <div class="headTitle">
            <div class="processName">
              <span>【{{processName}}】-文档流程</span>
              <!-- {{ fileSingleItem['processName'] }} -->
            </div>
          </div>
          <div class="baseInfo">
            <div v-if="basicInformation.length !== 0" style="padding-bottom: 10px;">
              <div class="messageContent" v-for="(item, index) in basicInformation" :key="index">
                <div v-for="item1 in item.items" :class="item1.length==1?'message_de':'message_deOne'"
                    :key="item1.id">
                  <detailMessage :attrList="item1"></detailMessage>
                </div>
              </div>
            </div>
            <a-empty v-else description="暂无数据" class="nodata"/>
          </div>
        </div>

        <div class="bottomBox">
          <div id="processHand" class="processHand">
            <div class="title">
              流程处理
            </div>
            <div class="processBox">
              <commonProcess 
                ref="peocessCon" 
                :step-arr="stepArr" 
                :radio-arr="radioArr"
                :process-table-is-show="processTableIsShow"
                :bottom-describe-is-show="isShowBottomDescribe" 
                :table-arr="tableArr"
                @submitProcessPeople="submitProcessPeople"
              ></commonProcess>
            </div>
          </div>
        </div>
      </a-spin>
  </div>
</template>

<script>
import { processData } from "@/json/file.js"
import detailMessage from "@/components/singlePage/detailMessage";
import commonProcess from '@/components/processCommon/approveProcess'

import { getAttributeGroup, getProcessSteps, getDisposeStatus, getRouting, completeWorkItem, reassignWorkItem } from "@/apiTest/fileApi.js"
import _ from "lodash";
export default {
  name: 'fileProcess',
  components: {
    detailMessage,
    commonProcess
  },
  data() {
    return {
      spinning: false,
      processName: '测试',
      basicInformation: [],

      stepArr:[],
      radioArr: [],
      processTableIsShow: true,
      isShowBottomDescribe: true,
      tableArr: [],
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.getBaseInfo()
      this.getProcessData()
      this.getStepData()
      this.getRoutingIndex()
    },
    getBaseInfo() {
      //基本信息
      getAttributeGroup({oid: JSON.parse(sessionStorage.getItem('todoInfoData')).pboOid}).then((res) => {
        // setTimeout(() => {
          // let res = processData
          // console.log(res);
          if (res.data && res.data.success) {
            if (res.data.data.length > 0) {
        //    console.log(res.data.data[0].rows)
              this.basicInformation = res.data.data[0].rows
            } else {
              this.basicInformation = []
            }
          } else {
            this.basicInformation = []
            this.$message.error(res.data.message)
          }
        }, 500);
      // })
    },
    getProcessData() {
      // 获取交付物流程节点（流程指引）
      getProcessSteps({oid: JSON.parse(sessionStorage.getItem('todoInfoData')).pboOid}).then((res) => {
        if (res && res.status === 200) {
          if (res.data.success) {
            if (res.data && res.data.data && res.data.data !== '' && res.data.data.length > 0) {
              res.data.data.map((item) => {
                item.state = item.state && item.state.toLowerCase(); // 统一转化成小写
              });
              let arr = res.data.data.filter((e)=>{
                return e.userFullName !=='';
              })
              this.stepArr = arr
              console.log(this.stepArr, 115);
              //是否显示“起草人..”按钮
              // let runStep = res.data.data[res.data.data.length - 1]//结束节点的前一个节点      
              // if (res.data.data[0].userFullName === this.userinfo.realName && runStep && this.fileSingleItem.state!=='已发放C' &&
              //   (runStep.state === '' && this.$route.query.isShow || runStep.state.indexOf('running') > -1) && 
              //   this.deliverableName.indexOf('项目团队') == -1) {
              //   this.isShowSponsor = true
              // } else {
              //   this.isShowSponsor = false
              // }
              //处于流程中，状况!=已完成，流程视图有数据，显示交付物添加、移除按钮
              // if (this.currentOid.indexOf('WorkItem') > -1) {
              //   if (this.fileSingleItem.workItemState !== '已完成' && (this.fileSingleItem.state === '正在工作' || this.fileSingleItem.state === '重新工作') &&
              //   this.deliverableName.indexOf('项目团队') == -1) {
              //     this.isShowDeliBtnList = true
              //   } else {
              //     this.isShowDeliBtnList = false
              //   }
              // } else {
              //   this.isShowDeliBtnList = false
              // }
            } else {
              // this.isShowSponsor = false
              this.stepArr = []
            }
          } else {
            this.stepArr = []
            this.$message.error(res.data.message)
          }
        } else {
          this.$message.error('接口失败！')
        }
      })
    },

    /**获取记录 */
    getStepData() {
      // 获取交付物流程记录
      getDisposeStatus({oid: JSON.parse(sessionStorage.getItem('todoInfoData')).pboOid}).then((res) => {
      //  console.log(res)
        if (res && res.status === 200) {
          if (res.data && res.data.success == true) {
            if (res.data.data.length > 0) {
              // this.tableArr = res.data.data
              this.tableArr = _.orderBy(res.data.data, ['workCompletedDate'], ['desc'])//按照创建时间降序排序
              this.tableArr.splice(0, 0, this.tableArr[this.tableArr.length - 1])      //把最后一个元素复制到首个
              this.tableArr.splice(-1, 1);       //删除最后一个元素
              // this.tableArr.splice(-1, 1)        //删除最后一个提交人是空的
              console.log(this.tableArr, 162)
            } else {
              this.tableArr = []
            }
          } else {
            this.tableArr = []
            this.$message.error(res.data.message)
          }
        } else {
          this.$message.error('接口失败！')
        }
      })
    },
    /**
     * getRoutingIndex 获取流程操作
     */
    getRoutingIndex() {
      getRouting({oid: JSON.parse(sessionStorage.getItem('todoInfoData')).workItemOid}).then((res) => {
        if (res && res.status === 200) {
          if (res.data && res.data.success) {
            if (res.data.data && res.data.data.length > 0) {
              this.radioArr = res.data.data
            } else {
              this.radioArr = []
            }
          } else {
            this.radioArr = []
            this.$message.error(res.data.message)
          }
        } else {
          this.$message.error('接口失败！')
        }
      })
    },

    /**
     * commonProcessSettings 组件回调方法
     * 功能： 提交审核人
     */
    submitProcessPeople(radioVal, desVal, userId) {
      this.radioVal = radioVal
      this.desVal = desVal
      this.reassignUser = userId
    //  console.log(radioVal,desVal,userId)
      // if (this.isShowProcessSetting) {
      //   this.$refs.commonProcessSettings.handleChange()
      // } else {
      if (radioVal === 'TRANSFER') {
        this.onCompleteWorkItemDivTransfer(this.radioVal, this.desVal, this.reassignUser)
      } else {
        this.onCompleteWorkItemDiv(this.radioVal, this.desVal)
      }
      // }
    },
    /**
     * 功能：提交流程操作
     */
    onCompleteWorkItemDiv(radioVal, desVal) {
      radioVal = this.radioVal
      desVal = this.desVal
      let parms = {}
      if (this.radioArr.length > 0) {
        parms = {
          oid: JSON.parse(sessionStorage.getItem('todoInfoData')).workItemOid,
          routeChoice: radioVal,
          comment: desVal,
          custActVar: '',
          reassignUser: ''
        }
      } else {
        parms = {
          oid: JSON.parse(sessionStorage.getItem('todoInfoData')).workItemOid,
          routeChoice: '',
          comment: desVal,
          custActVar: '',
          reassignUser: ''
        }
      }
      if (this.radioArr.length > 0 && radioVal == '') {
        this.$message.error('请选择操作！');
        return
      }
      if (desVal == '') {
        this.$message.error('请输入处理意见！');
        return
      }
      completeWorkItem(parms).then((res) => {
        if (res && res.status === 200) {
          if (res.data && res.data.success) {
            this.$message.success('流程操作成功！')
            //跳转至待办页面，并关闭查看交付物页面
            let tabArrNew = JSON.parse(sessionStorage.getItem('tabArr'))
            tabArrNew = tabArrNew.filter((rec) => {
              return rec.title !== '文档签审'
            })
            this.$store.commit('SET_TABS', tabArrNew)
            this.$router.push('/toDoPage');
          } else {
            this.$message.error(res.data.message)
          }
        } else {
          this.$message.error('接口失败！')
        }
      })
    },
    /**
     * 功能：提交流程操作--转办
     */
    onCompleteWorkItemDivTransfer(radioVal, desVal, reassignUser) {
      radioVal = this.radioVal
      desVal = this.desVal
      reassignUser = this.reassignUser
      let parms = {}
      if (this.radioArr.length > 0) {
        parms = {
          oid: JSON.parse(sessionStorage.getItem('todoInfoData')).workItemOid,
          routeChoice: radioVal,
          comment: desVal,
          custActVar: '',
          reassignUser: reassignUser
        }
      } else {
        parms = {
          oid: JSON.parse(sessionStorage.getItem('todoInfoData')).workItemOid,
          routeChoice: '',
          comment: desVal,
          custActVar: '',
          reassignUser: reassignUser
        }
      }
      if (this.radioArr.length > 0 && radioVal == '') {
        this.$message.error('请选择操作！');
        return
      }
      if (this.radioVal === 'TRANSFER' && this.reassignUser == '') {
        this.$message.error('请选择转办人员！');
        return
      }
      if (desVal == '') {
        this.$message.error('请输入处理意见！');
        return
      }
      reassignWorkItem(parms).then((res) => {
        if (res && res.status === 200) {
          if (res.data && res.data.success) {
            this.$message.success('流程操作成功！')
            //跳转至待办页面，并关闭查看交付物页面
            let tabArrNew = JSON.parse(sessionStorage.getItem('tabArr'))
            tabArrNew = tabArrNew.filter((rec) => {
              return rec.title !== '文档签审'
            })
            this.$store.commit('SET_TABS', tabArrNew)
            this.$router.push('/toDoPage');
          } else {
            this.$message.error(res.data.message)
          }
        } else {
          this.$message.error('接口失败！')
        }
      })
    },
  }
}
</script>

<style lang="less" scope>
  .fileProcess {
    height: calc(100vh - 173px);
    // background: #fff;
    // padding: 16px;
    overflow-y: scroll;
    overflow-x: hidden;
    .topBox {
      background-color: #fff;
      // padding: 16px 16px 0px 16px;
      margin-bottom: 20px;
      .headTitle {
        padding: 16px 16px 0px 16px;
        display: flex;
        align-items: center;
        .processName {
          font-size: 20px;
          font-weight: bold;
          // margin-left: 20px;
        }
      }
      .baseInfo{
        padding: 14px 28px;
        .messageContent {
          width: 50%;
          
          display: inline-block;
          .message_de {
            width: 30%;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            .messageList {
              min-width: 25%;
              margin: 5px 0;
              font-size: 14px;
              text-align: right;
              display: flex;
              justify-content: flex-start;
            }
          }
          .message_deOne {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            margin-bottom: 10px;
            .messageList {
              min-width: 25%;
              margin: 5px 0;
              font-size: 14px;
              text-align: right;
              display: flex;
              justify-content: flex-start;
            }
          }
        }
      }
      /deep/ .ant-tabs-bar {
        margin-bottom: 0px;
      }
    }
    .bottomBox {
      .processHand {
        // margin-bottom: 24px;
        background-color: #fff;
        padding: 0px 16px 16px 16px;
        .title {
          font-size: 18px;
          color: #333333;
          font-weight: bold;
          border-bottom: 1px solid #ddd;
          padding: 16px 0px;
          margin-bottom: 8px;
        }
      }
    }
  }
</style>